import React from 'react';
import { Modal, Button, Divider, Typography, Progress, Descriptions, Tag } from 'antd';
import { 
  UserOutlined,
  AuditOutlined,
  AppstoreOutlined,
  NodeExpandOutlined,
  CaretUpOutlined, 
  MinusOutlined, 
  CaretDownOutlined,
  CalendarOutlined
} from '@ant-design/icons';
import { Task, TaskLevel } from '../models/taskModels';
import dayjs from 'dayjs';

const { Title, Text } = Typography;

// 自定义图标组件
const HighOutlined: React.FC<{ className?: string }> = ({ className }) => {
  return <CaretUpOutlined className={className} />;
};

const MediumOutlined: React.FC<{ className?: string }> = ({ className }) => {
  return <MinusOutlined className={className} />;
};

const LowOutlined: React.FC<{ className?: string }> = ({ className }) => {
  return <CaretDownOutlined className={className} />;
};

export interface TaskDetailModalProps {
  visible: boolean;
  task: Task;
  onCancel: () => void;
  onEdit?: () => void; // 新增编辑按钮回调
  showEditButton?: boolean; // 是否显示编辑按钮
}

/**
 * 任务详情弹窗
 * 仅用于展示任务详情
 */
const TaskDetailModal: React.FC<TaskDetailModalProps> = ({ 
  visible, 
  task, 
  onCancel,
  onEdit,
  showEditButton = false
}) => {
  // 获取处理人显示名称，分别显示每个处理人
  const getReceiverDisplayNames = (receiverStr?: string): React.ReactNode => {
    if (!receiverStr) return '暂未指定处理人';
    
    // 将多个处理人分割并显示为多个标签，每个标签可单独删除
    const receivers = receiverStr.split('|');
    
    return (
      <div className="flex flex-wrap gap-1">
        {receivers.map((item, index) => {
          const parts = item.split('/');
          const displayName = parts.length >= 2 ? parts[1] : item; // 显示中文名
          const englishName = parts.length >= 2 ? parts[0] : item; // 保存英文名
          
          // 只读模式下只展示，不提供删除功能
          return (
            <Tag key={index} className="mb-1">
              {displayName}/{englishName}
            </Tag>
          );
        })}
      </div>
    );
  };

  // 获取创建人显示名称
  const getCreaterDisplayName = (createrStr?: string): React.ReactNode => {
    if (!createrStr) return '暂无创建人';

    const parts = createrStr.split('/');
    const displayName = parts.length >= 2 ? parts[1] : createrStr; // 显示中文名
    const englishName = parts.length >= 2 ? parts[0] : createrStr; // 保存英文名

    return (
      <Tag>
        {displayName} ({englishName})
      </Tag>
    );
  };

  // 获取复杂度图标
  const getLevelIcon = (level: TaskLevel) => {
    switch(level) {
      case '高':
        return <HighOutlined className="text-red-500" />;
      case '中':
        return <MediumOutlined className="text-orange-500" />;
      case '低':
        return <LowOutlined className="text-green-500" />;
      default:
        return null;
    }
  };

  // 获取子类型标签颜色
  const getSubTypeColor = (subType: string) => {
    switch(subType) {
      case '业务自驱型':
        return 'blue';
      case '平台赋能型':
        return 'cyan';
      case '联合攻坚型':
        return 'geekblue';
      case '个人效能提升':
        return 'magenta';
      case '公共工具建设':
        return 'purple';
      case '数字员工建设':
        return 'volcano';
      default:
        return 'default';
    }
  };

  return (
    <Modal
      title={<Title level={4}>任务详情</Title>}
      open={visible}
      onCancel={onCancel}
      width={800} 
      height={1400}
      footer={
        <div className="flex justify-end">
          <Button onClick={onCancel}>关闭</Button>
          {showEditButton && onEdit && (
            <Button 
              type="primary" 
              onClick={onEdit} 
              className="ml-2"
            >
              编辑
            </Button>
          )}
        </div>
      }
    >
      <div className="mb-4">
        <div className="mb-4">
          <Title level={4} className="mb-2">{task.title}</Title>
          
          {task.titleIndex && (
            <Text type="secondary" className="block">任务编号: {task.titleIndex}</Text>
          )}
          
          <div className="flex flex-wrap gap-2 mt-2">
            <Tag icon={<AppstoreOutlined />} color={task.type === '业务需求' ? 'cyan' : 'purple'}>
              {task.type}
            </Tag>
            <Tag icon={<NodeExpandOutlined />} color={getSubTypeColor(task.subType)}>
              {task.subType}
            </Tag>
            <Tag icon={getLevelIcon(task.level)} color={task.level === '高' ? 'red' : task.level === '中' ? 'orange' : 'green'}>
              {task.level}复杂度
            </Tag>
          </div>
        </div>
        
        <div className="mb-4">
          <div className="mb-1 font-medium">进度</div>
          <Progress 
            percent={task.process ?? 0} 
            status={task.process === 100 ? 'success' : 'active'}
            strokeColor={{
              '0%': '#108ee9',
              '100%': '#87d068',
            }}
          />
        </div>
        
        <Divider style={{ margin: '12px 0' }} />
        
        <Descriptions column={1} bordered size="small" className="mb-4">
          <Descriptions.Item label={<div className="flex items-center"><UserOutlined className="mr-1" /> 创建人</div>}>
            {getCreaterDisplayName(task.creater)}
          </Descriptions.Item>
          <Descriptions.Item label={<div className="flex items-center"><AuditOutlined className="mr-1" /> 处理人</div>}>
            {getReceiverDisplayNames(task.receiver)}
          </Descriptions.Item>
          {task.createdTime && (
            <Descriptions.Item label="创建时间">
              {dayjs(task.createdTime).format('YYYY-MM-DD HH:mm')}
            </Descriptions.Item>
          )}
          {task.updateTime && (
            <Descriptions.Item label="最近更新">
              {dayjs(task.updateTime).format('YYYY-MM-DD HH:mm')}
              {task.updater && <span className="ml-1">- {task.updater}</span>}
            </Descriptions.Item>
          )}
          <Descriptions.Item label="当前状态">
            <Tag color={
              task.status === 'todo' ? 'blue' : 
              task.status === 'inProgress' ? 'orange' : 'green'
            }>
              {task.status === 'todo' ? '待处理' : 
               task.status === 'inProgress' ? '进行中' : '已完成'}
            </Tag>
          </Descriptions.Item>
          {task.expectedDate && (
            <Descriptions.Item label={<div className="flex items-center"><CalendarOutlined className="mr-1" /> 期望完成时间</div>}>
              {dayjs(task.expectedDate).format('YYYY-MM-DD')}
            </Descriptions.Item>
          )}
          {task.finishedDate && task.status === 'done' && (
            <Descriptions.Item label={<div className="flex items-center"><CalendarOutlined className="mr-1" /> 实际完成时间</div>}>
              {dayjs(task.finishedDate).format('YYYY-MM-DD')}
            </Descriptions.Item>
          )}
        </Descriptions>
        
        {(task.thisWeekPlan || task.nextWeekPlan || task.problems) && (
          <>
            <Divider style={{ margin: '12px 0' }} />
            
            {task.thisWeekPlan && (
              <div className="mb-4">
                <div className="font-medium mb-1">本周工作</div>
                <div className="bg-gray-50 p-2 rounded whitespace-pre-line">
                  {task.thisWeekPlan}
                </div>
              </div>
            )}
            
            {task.nextWeekPlan && (
              <div className="mb-4">
                <div className="font-medium mb-1">下周计划</div>
                <div className="bg-gray-50 p-2 rounded whitespace-pre-line">
                  {task.nextWeekPlan}
                </div>
              </div>
            )}
            
            {task.problems && (
              <div className="mb-4">
                <div className="font-medium mb-1">存在的问题</div>
                <div className="bg-gray-50 p-2 rounded whitespace-pre-line">
                  {task.problems}
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </Modal>
  );
};

export default TaskDetailModal; 